<template>
	<div class="Film">
		<div ref="swipeListWrap" class="swipe_list_wrap">
			<ul ref="swipeList" :style="`transform:translateX(${translateX}px)`">
				<slot></slot>
			</ul>
			<a href="javascript:;" class="left_arrow_wrap" @click="toListLeft">
				<Icon name="ArrowLeftBold" />
			</a>
			<a href="javascript:;" class="right_arrow_wrap" @click="toListRight">
				<Icon name="ArrowRightBold" />
			</a>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Film_',
	props: {
		dataList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {
			translateX: 0,
		};
	},
	methods: {
		toListLeft() {
			if (this.translateX === 0) return;
			this.translateX += this.step();
			if (this.translateX > 0) this.translateX = 0;
		},
		toListRight() {
			const max = this.$refs.swipeListWrap.clientWidth - this.$refs.swipeList.scrollWidth;
			if (this.translateX <= max) return;
			this.translateX -= this.step();
			if (this.translateX < max) this.translateX = max;
		},
		step() {
			return this.$refs.swipeList.firstElementChild ? this.$refs.swipeList.firstElementChild.offsetWidth : 130;
		},
	},
};
</script>
<style lang="scss" scoped>
.Film {
	width: 100%;
	.swipe_list_wrap {
		width: 100%;
		overflow: hidden;
		position: relative;
		ul {
			display: flex;
			flex-wrap: nowrap;
			align-items: stretch;
			transition: all 0.6s;
			margin: 0 -10px;
			:deep(.FilmItem) {
				box-sizing: border-box;
				padding: 0 10px;
			}
		}
		.left_arrow_wrap,
		.right_arrow_wrap {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			width: 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 18px;
			.icon {
				color: #5eadff;
			}
			&:hover {
				background-color: rgba(0, 0, 0, 0.3);
			}
		}
		.right_arrow_wrap {
			right: 0px;
		}
	}
}
</style>
